<template>
  <div class="login">
      <div class="logo">
          <img src="https://shadow.elemecdn.com/faas/h5/static/logo.ba876fd.png" alt="">
      </div>

            <form action="" @keyup.enter="login">
          <p>
              <input type="text" placeholder="手机号" name='tel' id="tel" v-model="username"/>
          </p>
           <p>
              <input type="password" placeholder="密码" name="vercode" id="vercode" v-model="password"/>
          </p>
      </form>
      <p class="agree">
             新用户登录即自动注册，并表示已同意
        <a href="//h5.ele.me/service/agreement/#initTitle=%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE&amp;key=ruleQue18" class="togo">《用户服务协议》</a>
        和
        <a href="http://terms.alicdn.com/legal-agreement/terms/suit_bu1_other/suit_bu1_other201903051859_43484.html" class="togo">《隐私权政策》</a>
      </p>

      <van-button type="primary" class="btn" color="#4cd96f" @click="login" >登录</van-button>

      <p class="bottom">
          关于我们
      </p>
  </div>
</template>
<script>
export default {
  data: () => ({
    active: 0,
    username: '',
    password: '',
    newUsername: '',
    newPassword: '',
    userinfo: [],
    flag: false,
    flag2: false,
    flag3: false,
    data: '',
    userss: {}

  }),
  created () {
    this.getuser()
  },
  methods: {
    login () {
      this.getlogin2()
      this.flag2 = this.getlogin()
      if (this.username === '' || this.password === '') {
        return this.$Toast('请输入用户名或密码')
      } else if (!this.flag2) {
        return this.$Toast('用户名或密码错误')
      } else {
        localStorage.setItem('user', JSON.stringify(this.userss))
        this.$router.replace('/')
      }
    },
    async getuser () {
      const { data: { users } } =
       await this.$axios.get('/api/getuserinfo')
      this.userinfo = users
      console.log(this.userinfo)
    },
    getlogin () {
      this.flag = this.userinfo.some((item) => {
        return item.username === this.username && item.password === this.password
      })
      return this.flag
    },
    getlogin2 () {
      this.userinfo.forEach((item) => {
        if (item.username === this.username && item.password === this.password) {
          this.userss = item
        }
      })
      return this.userss
    },
  }
}
</script>
<style lang="less" scoped>
    .login{
        padding:40px;
        .logo{
            width:100%;
            text-align: center;
            img{
                height:56px;
            }
        }
        input{
            width:300px;
            height:48px;
            border-radius: 5px;
            border:1px solid #ddd;
            padding-left:10px;
            box-sizing: border-box;
        }
        .agree{
            color:#999;
            font-size:14px;
        }
        .togo{
            color:#2395ff;
            font-size:14px;
        }
        .btn{
            width:100%;
            font-size: 16px;
        }
        .bottom{
            font-size: 12px;
            color: #999;
            text-align:center;
        }
    }
</style>
